<template>
  <div id="shopXq">
    <!-- 头部导航栏-->
    <div class="navgd">
      <el-row class="top">
        <el-col :span="12" class="zuo">
          <el-row style="margin-top: 10px;">
            <el-col :span="2" :offset="1">
              <router-link to="/"><a>商城</a></router-link>
            </el-col>
            <el-col :span="2">
              <a>MIUI</a>
            </el-col>
            <el-col :span="2">
              <a>loT</a>
            </el-col>
            <el-col :span="2">
              <a>云服务</a>
            </el-col>
            <el-col :span="2">
              <a>天星数科</a>
            </el-col>
          </el-row>
        </el-col>
        <el-col class="you" :span="12">
          <el-row style="margin-top: 10px;">
            <el-col :span="2" :offset="17">
              <el-dropdown>
                <a><i class="el-icon-user"></i>我的</a>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-if="user.id!=null">
                    <el-link type="info" @click="goUserMain">用户中心</el-link>
                  </el-dropdown-item>

                  <!--商户-->
                  <el-dropdown-item v-if="user.commercialState==1">
                    <router-link to="/home"><el-link type="info">商户管理</el-link></router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null && user.commercialState==null">
                    <router-link to="/apply_for_commercial"><el-link type="info">我要成为商户</el-link></router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null && user.commercialState==0">
                    <router-link to="/apply_for_supplier"><el-link type="info">申请商户审核等待中...</el-link></router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null && user.commercialState==2">
                    <router-link to="/apply_for_supplier"><el-link type="info">申请商户被拒绝，点击我可再次申请</el-link></router-link>
                  </el-dropdown-item>

                  <!--供应商-->
                  <el-dropdown-item v-if="user.id!=null && user.supplierState==1">
                    <router-link to="/home"><el-link type="info">供应商管理</el-link></router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null && user.supplierState==null">
                    <router-link to="/apply_for_supplier"><el-link type="info">我要成为供应商</el-link></router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null && user.supplierState==0">
                    <el-link type="info">申请供应商审核等待中...</el-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null && user.supplierState==2">
                    <router-link to="/apply_for_supplier"><el-link type="info">申请供应商被拒绝，点击我可再次申请</el-link></router-link>
                  </el-dropdown-item>

                  <el-dropdown-item v-if="user.id==null">
                    <router-link to="/Login"><el-link type="info">登录</el-link></router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null">
                    <span @click="logout"><el-link type="info">退出</el-link></span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
            <el-col :span="3" class="catcss">
              <el-badge :value="cartnum" class="item">
                <button @click="tzgwcar" class="catcss">购物车</button>
              </el-badge>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <!--搜索-->
    <div class="searchkuang" style="margin-top: 30px">
      <el-row>
        <el-col :span="16">
          <el-row class="shopflgw" style="margin-top: 42px;">
            <el-col :span="3" :offset="1">
              <a @click="shoptypeupdate('')">全部商品分类</a>
            </el-col>
            <el-col :span="1">
              &nbsp;
            </el-col>

            <div v-for="(s,index) in  shoptypes">
              <el-col :span="3"  v-if="index<5">
                <a @click="shoptypeupdate(s.id)">{{s.name}}</a>
              </el-col>
            </div>

            <el-col :span="2">
              <a @click="shoptypeupdate('')"><i class="el-icon-zoom-in">更多></i></a>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8" style="margin-top: 35px">
          <el-input v-model="shop.shopName" style="width:250px" placeholder="请输入内容" clearable></el-input>
          <el-button type="info" style="width:70px" @click="searchipt">搜索</el-button>
        </el-col>
      </el-row>
    </div>

    <div class="suoyoushop">
      <div class="sh111"></div>
        <el-row :gutter="20">
          <div v-for="(s,index) in shops">
              <el-col :span="6" class="shopsItem">
                <el-card shadow="hover" class="cardys">
                  <el-image class="rmshopimg"
                            :src="s.imags[0].imagUrl"
                            fit="fill"></el-image>
                  <div align="center">{{s.shopName}}</div>
                  <el-row style="margin-top: 5px">
                    <el-col :span="6" :offset="2">
                      <span style="color: red">￥ {{s.shopPrice}}</span>
                    </el-col>
                    <el-col :span="6" :offset="8">
                      <span style="color: grey;font-size: 9px;">库存:{{s.shopUpnum}}</span>
                    </el-col>
                  </el-row>
                  <div style="margin-top: 5px">
                    <el-link TYPE="danger" style="float:right" class="el-icon-shopping-cart-1" @click.stop="addCart(s.id)">加入购物车</el-link>
                  </div>
                </el-card>
              </el-col>
          </div>
        </el-row>

        <div style="text-align: center">
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageno"
            :page-sizes="[8, 12, 16, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
    </div>

    <!--底部-->
    <div class="site-footer">
      <div class="wenzitiao">
        <div class="wenzitiaoxia" style="margin-top: 20px">
          <a><img class="img1" src="../jiangzhipeng/images/字1.png" alt="图片出错" width="24px" height="24px">预约维修服务
          </a>
          <a><img class="img2" src="../jiangzhipeng/images/字2.png" alt="图片出错" width="24px" height="24px">7天无理由退货
          </a>
          <a><img class="img3" src="../jiangzhipeng/images/字3.png" alt="图片出错" width="24px" height="24px">15天免费换货
          </a>
          <a><img class="img4" src="../jiangzhipeng/images/字4.png" alt="图片出错" width="24px" height="24px">满69包邮（米粉节特惠） </a>
          <a class="shebian">
            <img class="img5" src="../jiangzhipeng/images/字5.png" alt="图片出错" width="24px" height="24px">520余家售后网点
          </a>
        </div>
      </div>
      <div class="zuihouxiaozi">
        <div class="zuihouxiaozizi">
          <a>小米商城 |</a>
          <a>MIUI |</a>
          <a>米家 |</a>
          <a>米聊 |</a>
          <a>多看 |</a>
          <a>游戏 |</a>
          <a>政企服务 |</a>
          <a>小米天猫店 |</a>
          <a>小米集团隐私政策 |</a>
          <a>小米公司儿童信息保护规则 |</a>
          <a>小米商城隐私政策 |</a>
          <a>小米商城用户协议 |</a>
          <a>问题反馈 |</a>
          <a>Select Location</a>
          <br>
          <a>北京互联网法院法律服务工作站 |</a>
          <a>中国消费者协会 |</a>
          <a>北京市消费者协会</a>
          <br>
          <span>@</span>
          <a>mi.com</a>
          <span>京ICP备10046444号</span>
          <a>京公网安备11010802020134号</a>
          <a>京网文[2020]027-042号</a>
          <br>
          <a>（京）网械平台备字（2018）第00005号</a>
          <a>互联网药品信息服务资格证 (京)-非经营性-2014-0090</a>
          <a>营业执照</a>
          <a>医疗器械质量公告</a>
          <br>
          <a>增值电信业务许可证</a>
          <span>网络食品经营备案</span>
          <span>京食药网食备202010048</span>
          <a>食品经营许可证</a>
          <br>
          <span>违法和不良信息举报电话：171-5104-4404</span>
          <a>知识产权侵权投诉</a>
          <span>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "shopXq",
      data(){
          return {
            user:{
              id:sessionStorage.getItem('id')
            },
            shoptypes:[],
            shops:[],
            shop: {shopType:"",isUp: "1"},
            pageno: 1,
            pagesize: 16,
            total: 1,
            cart:{
              uid:sessionStorage.getItem('id'),
              gid: "",
              quantity:1
            },
            cartnum:0
          }
      },
      methods:{
        getObject(){
          //检查用户是否登录，如果没有登录，就不做异步调用
          if(this.user.id!=null){
            //异步获取数据，根据id查询用户
            this.$axios.get("queryUserById.action/"+this.user.id,null).
            then(response=>{
              this.user = response.data;
            }).
            catch()
          }else {
            this.user= {
              id:null
            };
          }
        },
        logout(){
          //注销账号，清空sessionStorage数据
          sessionStorage.clear();
          //更换当前路由路径
          this.$router.push("/Login");
        },
        tzgwcar(){
          if (this.user.id!=null){
            this.$router.push("/gwcar");
          }else {
            this.$router.push("/");
          }
        },
        shoptypeupdate(typeid){
          this.shop.shopType=typeid;
          this.getShopData();
        },
        getgwCartnum(){
          if(this.user.id!=null) {
            this.$axios.get("cart/querygwCartnum.action/" + this.user.id)
              .then(res => {
                this.cartnum = res.data;
              })
              .catch(err => {
                alert(err)
              })
          }else {
            this.cartnum= 0;
          }
        },
        addCart(gid) {
          //加入购物车
          if (this.user.id!=null){
            this.cart.gid=gid;
            this.$axios.post("cart/cart.action",this.cart)
              .then(res => {
                if (res.data.code==1){
                  this.$notify({
                    title: '加入成功',
                    message: res.data.msg,
                    type: 'success',
                    position: 'bottom-right'
                  });
                  this.getgwCartnum();
                }else if(res.data.code==2){
                  this.$notify.error({
                    title: '加入失败',
                    message: res.data.msg,
                    position: 'bottom-right'
                  });
                }else {
                  this.$notify.error({
                    title: '加入失败',
                    message: res.data.msg,
                    position: 'bottom-right'
                  });
                }
              })
              .catch(err => {
                this.$notify.error({
                  title: '失败',
                  message: res.data.msg,
                  position: 'bottom-right'
                });
              })
          }else {
            this.$router.push("/Login");
          }
        },
        goUserMain(){
          //  去用户中心
          this.$router.push("/userMainView");
        },
        getShoptype(){
          this.$axios.get("shopType/shopType.action")
            .then(res => {
              this.shoptypes=res.data;
            })
            .catch(err => {
              alert(err)
            })
        },
        getShopData(){
          //组装数据
          var params = new URLSearchParams();

          if(this.$route.params.searchtxt!=null){
            params.append("shopName", this.$route.params.searchtxt);
          }
          if(this.$route.params.typeid!=null){
            params.append("shopType", this.$route.params.typeid);
          }
          params.append("pageno", this.pageno);
          params.append("pagesize", this.pagesize);
          Object.keys(this.shop).forEach(item => {
            params.append(item, this.shop[item]);
          })
          this.$axios.get("shop/shop.action",{params: params})
            .then(res => {
              res.data.records.forEach(item=>{
                item.imags[0].imagUrl=this.$store.state.path+item.imags[0].imagUrl;
              })
              this.shops = res.data.records;
              this.total = res.data.total;
              if(this.$route.params.typeid!=null){
                this.$route.params.typeid=null
              }
            })
            .catch(err => {
              alert(err)
            })
        },
        handleSizeChange(val) {
          //每页范围
          this.pagesize = val;
          this.getShopData();
        },
        handleCurrentChange(val) {
          //当前页
          this.pageno = val;
          this.getShopData();
        },
        searchipt(){
          this.getShopData();
        }
      },
      created() {
        console.log(this.$route.params)
        this.getShoptype();
        this.getgwCartnum();
        this.getShopData();
      }
    }
</script>

<style scoped>
  .shopsItem{
    margin-bottom: 15px;
  }
.suoyoushop{
  width:100%;
  background-color: #f5f5f5;
}
</style>
